<template>
  <div class="person">
    <h2>姓名：{{ person.name }}</h2>
    <h2>年龄：{{ person.age }}</h2>
    <h2>性别：{{ person.gender }}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="changeGender">修改性别</button>
  </div>
</template>

<script lang="ts">
export default {
  name: 'Person',
}
</script>

<script lang="ts" setup>
import { ref, reactive, toRefs ,toRef} from 'vue'

// 数据
// let car = reactive({ brand: '奔驰', price: 100 })
// let sum = ref(0)
let person = reactive({ name: '张三', age: 18, gender: '男' })

// 解构赋值  toRefs  可以把 reactive 定义的对象类型数据，变成响应式的属性 每个属性都是ref 类型
let { name, age } = toRefs(person)

// 变成一个ref 类型的变量
let gender = toRef(person,'gender')

function changeName() {
  // person.name +='~'
  name.value += '~'
  console.log(name)
}
function changeAge() {
  // person.age += 1
  age.value += 1

}

function changeGender() {
  gender.value = '女'
} 


</script>

<style scoped>
.person {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}

button {
  margin: 0 5px;
}

li {
  font-size: 20px;
}
</style>